<template>
	<view>
		<!-- 搜索框区域 -->
		<view class="topSearch">
			<view class="searchbar">
				<image src="@/static/images/other/search.png"></image>
				<view class="inputCon">
					<input placeholder="输入需要查询的单词" placeholder-style="color:#999999;font-size:28rpx" v-model="searchKey" @input="input"/>
					<image src="@/static/images/other/clear.png" @click="clearInput()"></image>
				</view>
			</view>
			<view class="calendar" @click="toIndex">
				<view class="cancel">取消</view>
			</view>
		</view>
		<!-- 历史展现区域 -->
		<view class="historyShow">
			<view class="historyItem" v-for="item in historyWord" @click="toWord(item.id)">
				<view class="wordTop">
					<view class="word">{{item.word}}</view>
					<view class="accent">{{item.accent}}</view>
				</view>
				<view class="wordBottom">{{item.meanCn}}</view>
			</view>
		</view>
		<!-- 清空历史 -->
		<view class="cleanHistory" v-if="cleanHistoryStatus" @click="cleanHistory">
			<text>清空历史</text>
		</view>
		
		<!-- 提示信息弹窗 -->
		<popup ref="popup"></popup>
	</view>
</template>

<script>
	import popup from "@/components/popup.vue";
	import {getSearchList,getHistory,addOne,cleanHistory} from "@/api/search.js";
	export default {
		components:{popup},
		data() {
			return {
				searchKey:"",
				historyWord:[],
				themeColor:"",
				themeColorLess:"",
				cleanHistoryStatus: true,
			};
		},
		methods:{
			clearInput(){
				this.searchKey = "";
			},
			toIndex(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			async input(){
				if (this.searchKey != '') {
					let ans = (await getSearchList(this.searchKey)).data;
					console.log("getSearchList",ans);
					if (ans.code != 200) {
						this.$refs.popup._popError(ans.error);
						return;
					};
					this.historyWord = ans.data;
					this.cleanHistoryStatus = false;
				}
			},
			async addHistory(id){
				let ans = (await addOne(id)).data;
				console.log("addHistory",ans);
				if (ans.code != 200) {
					this.$refs.popup._popError(ans.error);
					return;
				};
			},
			toWord(id){
				this.addHistory(id);
				uni.navigateTo({
					url:"/pages/word/word?wordId="+id,
				})
			},
			async cleanHistory(){
				let that = this;
				uni.showModal({
					title:"确认清空吗?",
					async success(res) {
						if (res.confirm) {
							let ans = (await cleanHistory()).data;
							console.log("cleanHistory",ans);
							if (ans.code != 200) {
								this.$refs.popup._popError(ans.error);
								return;
							};
							that.historyWord = null;
						} else {
							console.log("取消");
						}
					},
				})
				
				
				
			}
		},
		async onLoad(){
			//获取主题颜色
			let color = uni.getStorageSync("color");
			this.themeColor = JSON.parse(color).themeColor;
			this.themeColorLess = JSON.parse(color).themeColorLess;
			//获取历史记录
			let ans = (await getHistory()).data;
			console.log("getHistory",ans);
			if (ans.code != 200) {
				this.$refs.popup._popError(ans.error);
				return;
			};
			this.historyWord = ans.data;
		},
	}
</script>

<style lang="scss">
	page{
		background-color: $bg-color;
	}
	
	// 搜索框区域
	.topSearch{
		margin: 0 $both-sides;
		display: flex;
		align-items: center;
		.searchbar{
			display: flex;
			align-items: center;
			height: 60rpx;
			background-color: white;
			border-radius: 8rpx;
			width: calc(100% - 76rpx);
			
			image{
				height: 36rpx;
				width: 36rpx;
				padding-left: 16rpx;
			}
			
			.inputCon{
				width: calc(100% - 88rpx);
				padding-left: 18rpx;
				display: flex;
				align-items: center;
				
				input{
					font-size: 28rpx;
					width: calc(100% - 30rpx);
				}
				
				image{
					padding-left: 10rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
		.calendar{
			margin-left: 20rpx;
			height: 46rpx;
			
			.cancel{
				height: 46rpx;
				line-height: 46rpx;
				font-size: 26rpx;
				font-weight: 600;
			}
		}
	}
	
	// 历史展现区域
	.historyShow{
		background-color: white;
		margin-top: 30rpx;
		
		.historyItem{
			margin: 0 40rpx;
			padding: 26rpx 0;
			border-bottom: solid $border-color $border-size;
			
			.wordTop{
				display: flex;
				.word{
					font-size: 26rpx;
					font-weight: 600;
					color: #283044;
				}
				.accent{
					font-size: 22rpx;
					padding-left: 30rpx;
					color: #b9b9b9;
				}
			}
			
			.wordBottom{
				padding-top: 20rpx;
				font-size: 24rpx;
				color: #434343;
			}
		}
	}
	//清空历史
	.cleanHistory{
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: white;
		height: 120rpx;
		text{
			font-size: 32rpx;
			
		}
	}
	
</style>
